<template>
  <div class="app">
    <!-- 导航栏 -->
    <div class="header">
      <div class="nav">
        <ul>
          <li v-if="!this.$store.getters.getUser">
            <el-button type="text" @click="login">登录</el-button>
            <span class="sep">|</span>
            <el-button type="text" @click="register = true">注册</el-button>
          </li>

          <li v-else>
            欢迎
            <el-popover placement="top" width="160" v-model="visible">
              <p>确定要退出登录吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false"
                  >取消</el-button
                >
                <el-button type="primary" size="mini" @click="logout"
                  >确定</el-button
                >
              </div>
              <el-button
                slot="reference"
                style="background: transparent; border: none"
                >{{ this.$store.getters.getUser.username }}</el-button
              >
            </el-popover>
          </li>
          <li>
            <router-link to="/home">我的订单</router-link>
          </li>
          <li>
            <router-link to="/home">我的收藏</router-link>
          </li>
          <li :class="count > 0 ? 'shopCart-full' : 'shopCart'">
            <router-link to="/cart">
              <i class="el-icon-shopping-cart-full"></i>
              购物车
              <!-- <span class="count" v-if="!this.$store.getters.getUser">(0)</span> -->
              <span class="count">({{ count }})</span>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <!-- tab切换 -->
    <div class="tab">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#409eff"
        router
      >
        <div class="logo">
          <router-link to="/">
            <img src="./assets/imgs/logo.png" alt="" />
          </router-link>
        </div>
        <el-menu-item index="/home" class="hhhh">首页</el-menu-item>
        <el-menu-item index="/goods">全部商品</el-menu-item>
        <el-menu-item index="/about">关于我们</el-menu-item>
        <div class="so">
          <el-input
            placeholder="请输入搜索内容"
            v-model="search"
            @keyup.enter.native="handerclick"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handerclick"
            ></el-button>
          </el-input>
        </div>
      </el-menu>
    </div>
    <MyLogin></MyLogin>
    <MyRegister :register="register" @fromChild="isRegister"></MyRegister>
    <keep-alive v-if="$route.meta.keepAlive">
      <router-view></router-view>
    </keep-alive>
    <router-view v-else></router-view>
    <div class="footer">
      <div class="footer_top">
        <div class="container">
          <p class="text">
            <a href="javascipt:void(0)">7天无理由退换货</a>
            <a href="javascipt:void(0)">满99元全场免邮</a>
            <a href="javascipt:void(0)" style="margin-right: 0">100%品质保证</a>
          </p>
        </div>
      </div>
      <div class="footer_center">
        <a href="javascipt:void(0)">
          <div class="sssimg"></div>
        </a>
      </div>
      <div class="footer_bottom">
        <p>
          <router-link to="/">首页</router-link>
          <span>|</span>
          <router-link to="/goods">全部商品</router-link>
          <span>|</span>
          <router-link to="/about">关于我们</router-link>
        </p>
        <p class="coty">商城版权所有 &copy; 2012-2021</p>
      </div>
    </div>
  </div>
</template>
<script>
import MyLogin from "./components/MyLogin";
import MyRegister from "./components/MyRegister";

import { mapActions, mapGetters } from "vuex";
export default {
  components: { MyLogin, MyRegister },
  beforeUpdata() {
    this.activeIndex = this.$route.path;
  },
  data() {
    return {
      isLogin: true,
      search: "",
      activeIndex: "",
      register: false,
      userList: JSON.parse(sessionStorage.getItem("user") || "[]"),
      visible: false,
      flag: true,
    };
  },
  methods: {
    ...mapActions(["setUser", "setShowLogin", "setShowLogin"]),
    login() {
      this.setShowLogin(true);
      this.flag = false;
    },
    logout() {
      this.visible = false;
      // 清空本地登录信息
      sessionStorage.clear();

      // 清空vuex登录信息
      this.setUser("");
      this.flag = true;
      this.$notify({
        title: "成功",
        message: "退出成功",
        type: "success",
        duration: "1500",
      });
      this.setShoppingCart();
    },
    handerclick() {
      if (this.search.length == 0) {
        return;
      }
      // console.log(this.search);
      this.$router.push({ path: "/goods", query: { search: this.search } });
      this.search = "";
      // if (this.$router == "/" || this.$router == "/home") return;
      this.timer = setTimeout(() => {
        this.$router.go(0);
      }, 100);
    },
    isRegister(val) {
      this.register = val;
    },
    ...mapActions("cart", ["setShoppingCart"]),
  },
  created() {
    // this.setShoppingCart();
    if (sessionStorage.getItem("user")) {
      this.setUser(JSON.parse(sessionStorage.getItem("user")));
    }
  },
  computed: {
    ...mapGetters({
      count: "cart/getNum",
      uuser: "user/getUser",
    }),
  },
};
</script>
<style lang="scss" scoped>
@import "./reset/index";
.app {
  // height: 2000px;
  .el-main {
    min-height: 300px;
    padding: 20px 0;
  }
  .header {
    height: 40px;
    background-color: #3d3d3d;
    margin-bottom: 20px;
    .nav {
      width: 1225px;
      margin: 0 auto;
      ul {
        float: right;
        li {
          float: left;
          height: 40px;
          color: #b0b0b0;
          font-size: 14px;
          text-align: center;
          line-height: 40px;
          margin-left: 20px;
          .sep {
            color: #b0b0b0;
            font-size: 14px;
            margin: 0px 5px;
          }
          .el-button {
            color: #b0b0b0;
          }
          .el-button:hover {
            color: #fff;
          }
          a {
            color: #b0b0b0;
          }
          a:hover {
            color: #fff;
          }
        }
        .shopCart {
          width: 120px;
        }
        .shopCart:hover {
          background: #fff;
          a {
            color: #ff6700;
          }
        }
        .shopCart-full {
          width: 120px;
          background: #ff6700;
          a {
            color: white;
          }
        }
      }
    }
  }
  .tab {
    padding: 0;
    margin-bottom: 20px;
    .el-menu {
      max-width: 1225px;
      margin: 0 auto;
      .logo {
        height: 60px;
        width: 189px;
        float: left;
        margin-right: 100px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .so {
        margin-top: 10px;
        width: 300px;
        float: right;
      }
      .el-menu-item {
        width: 100px;
        text-align: center;
      }
      .hhhh {
        width: 60px;
      }
    }
  }
  .footer {
    margin-top: 20px;
    width: 100%;
    text-align: center;
    background: #2f2f2f;
    padding-bottom: 20px;
    .footer_top {
      border-bottom: 1px solid #3d3d3d;
      line-height: 145px;
      margin: 0 auto;
      text-align: center;
      p a {
        color: #fff;
        font-size: 20px;
        margin-right: 210px;
        padding-left: 44px;
        height: 40px;
        display: inline-block;
        line-height: 40px;
        text-decoration: none;
        background: url("./assets/imgs/us-icon.png") no-repeat left 0;
      }
    }
    .footer_center {
      height: 50px;
      line-height: 50px;
      margin-top: 20px;
      .sssimg {
        cursor: pointer;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        background: url("./assets/imgs/github.png") no-repeat;
      }
    }
    .footer_bottom {
      text-align: center;
      color: #888888;
      p {
        margin: 20px 0 16px 0;
        a {
          color: #888888;
          text-decoration: none;
        }
        a:hover {
          color: #fff;
        }
        span {
          padding: 0 22px;
        }
      }
    }
  }
}
</style>
